<template>
  <div class="">
    <el-card>
      <div class="t-left">
        <el-button type="primary" @click="addCategoriesDialog">添加分类</el-button>
      </div>
      <!-- 分类表格 -->
      <tree-table :data="CategoriesData" :columns="columns" :selection-type="false" :expand-type="false" show-index
        index-text="#" border :show-row-hover="false">
        <!-- 是否有效 -->
        <template slot="isok" slot-scope="scope">
          <i v-if="scope.row.cat_deleted === false" class="el-icon-success"></i>
          <i v-else class="el-icon-error"></i>
        </template>
        <!-- 排序 -->
        <template slot="order" slot-scope="scope">
          <el-tag v-if="scope.row.cat_level===0">一级</el-tag>
          <el-tag type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
          <el-tag type="warning" v-else>三级</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="opt" slot-scope="scope">
          <el-button size="mini" type="primary" @click="editCategoriesDialog(scope.row.cat_id)"><i
              class="el-icon-edit"></i>
            编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteCategories(scope.row.cat_id)"><i
              class="el-icon-delete"></i> 删除
          </el-button>
        </template>
      </tree-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1"
          :page-sizes="[5, 10, 15, 20]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="30">
        </el-pagination>
      </div>
      <!-- 编辑dialog -->
      <el-dialog title="提示" :visible.sync="editDialogVisible" :before-close="edithandleClose" width="30%">
        <el-form label-width="100px">
          <el-form-item label="旧分类名称">
            <el-input v-model="oldcat_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="新分类名称">
            <el-input v-model="newcat_name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editCategories">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 添加分类dialog -->
      <el-dialog title="提示" :visible.sync="addDialogVisible" width="30%">
        <el-form label-width="100px" expandTrigger='hover'>
          <el-form-item label="分类名称">
            <el-input v-model="addCatefrom.cat_name"></el-input>
          </el-form-item>

          <el-form-item label="父级分类" prop="cat_pid">
            <div class="block">
              <el-cascader v-model="selectedParCate" :options="ParentList" :props="cascaderProps"
                @change="handleChange">
              </el-cascader>
            </div>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitaddCate">确 定</el-button>
        </span>
      </el-dialog>

    </el-card>

  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        //   初始数据
        CategoriesData: [],
        columns: [{
            label: '分类名称',
            prop: 'cat_name'
          },
          //type:'template'(将该列设置为模板列)，template:'isok'(设置该列模板的名称为isok)
          {
            label: '是否有效',
            prop: '',
            type: 'template',
            template: 'isok'
          },
          {
            label: '排序',
            prop: '',
            type: 'template',
            template: 'order'
          },
          {
            label: '操作',
            prop: '',
            type: 'template',
            template: 'opt'
          }
        ],
        // 页码，每页条数
        page: 1,
        size: 5,
        // 编辑dialog变量
        editDialogVisible: false,
        // 添加分类dialog变量
        addDialogVisible: false,
        // 分类id
        id: '',
        oldcat_name: '',
        newcat_name: '',
        // 父级分类数据
        ParentList: [],
        // 级联菜单数据
        selectedParCate: [],
        // 配置项
        cascaderProps: {
          // 定义选择传到绑定数组里的字段
          value: 'cat_id',
          // 定义显示字段
          label: 'cat_name',
          // 定义联级
          children: 'children',
          // 定义点击还是hover
          expandTrigger: 'hover',
          checkStrictly: true
        },
        // 添加分类弹窗数据
        addCatefrom: {
          cat_pid: '',
          cat_name: '',
          cat_level: ''
        }
      }
    },
    created() {
      this.getCategoriesData(this.page, this.size)
      this.getParentList()
    },
    mounted() {},
    watch: {},
    computed: {},
    methods: {
      // 初始数据
      getCategoriesData(page, size) {
        this.$axios.get('categories', {
          params: {
            pagenum: page,
            pagesize: size
          }
        }).then(val => {
          this.CategoriesData = val.data.result
          console.log(this.CategoriesData);
        })
      },
      // 删除分类
      deleteCategories(id) {
        console.log(id);
        this.$axios.delete('categories/' + id).then(val => {
          if (val.meta.status != 200) {
            return this.$message.error(val.meta.msg)
          }
          this.$message.success(val.meta.msg)
          this.getCategoriesData(this.page, this.size)
          console.log(val);
        })
      },
      // 分页
      handleSizeChange(val) {
        this.size = val
        this.getCategoriesData(this.page, this.size)
      },
      handleCurrentChange(val) {
        this.page = val
        this.getCategoriesData(this.page, this.size)
      },

      // 点击编辑提交分类打开dialog
      editCategoriesDialog(id) {
        this.editDialogVisible = true
        this.id = id
        this.$axios.get('categories/' + id).then(val => {
          console.log(val);
          this.oldcat_name = val.data.cat_name
          console.log(this.oldcat_name);
        })
      },
      // 提交编辑分类
      editCategories() {
        this.editDialogVisible = false
        this.$axios.put('categories/' + this.id, {
          cat_name: this.newcat_name
        }).then(val => {
          if (val.meta.status != 200) {
            return this.$message.error(val.meta.msg)
          }
          this.$message.success(val.meta.msg)
          this.newcat_name = ''
          this.getCategoriesData(this.page, this.size)
        })
      },
      // 关闭编辑dialog回调
      edithandleClose() {
        this.newcat_name = ''
        this.editDialogVisible = false
      },
      // 添加分类按钮打开弹窗
      addCategoriesDialog() {
        this.addDialogVisible = true
      },
      //父级分类获取
      getParentList() {
        this.$axios.get('categories', {
          params: {
            type: 2
          }
        }).then(val => {
          this.ParentList = val.data
          console.log(this.ParentList);
          // console.log(val);
        })
      },
      handleChange(id) {
        console.log(id);
      },
      // 提交添加按钮
      submitaddCate() {
        this.addCatefrom.cat_pid = this.selectedParCate[this.selectedParCate.length - 1]
        this.addCatefrom.cat_level = this.selectedParCate.length

        this.$axios.post('categories', this.addCatefrom).then(val => {
          console.log(val);
          if (val.meta.status != 201) {
            return this.$message.error(val.meta.msg)
          }
          this.$message.success(val.meta.msg)
          this.addDialogVisible = false
          this.getCategoriesData(this.page, this.size)
        })
      }

    },
  }

</script>
<style lang="css" scoped>
  .t-left {
    text-align: left;
  }

  .el-icon-success {
    color: green;
  }

  .el-icon-error {
    color: red;
  }

</style>
